<template>
  <j-modal
    switchFullscreen
    :title="title"
    width="70%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="公司名称"
              hasFeedback
            >
              <a-input
                placeholder="请输入公司名称"
                v-decorator="['companyName', {}]"
              />
            </a-form-item>
          </a-col>
          <!--          <a-col :md="12" :sm="24">-->
          <!--            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="经销商编号" hasFeedback>-->
          <!--              <a-input placeholder="请输入经销商编号" v-decorator="['custCode', {}]" />-->
          <!--            </a-form-item>-->
          <!--          </a-col>-->
<!--          <a-col :md="12" :sm="24">-->
<!--            <a-form-item-->
<!--              :labelCol="labelCol"-->
<!--              :wrapperCol="wrapperCol"-->
<!--              label="经销商类型"-->
<!--              hasFeedback-->
<!--            >-->
<!--              <cn-dict-select-tag-->
<!--                :options="{ value: 'dictDataCode', label: 'dictDataDesc' }"-->
<!--                :triggerChange="true"-->
<!--                dictCode="cust_type"-->
<!--                v-decorator="['custType', {}]"-->
<!--                placeholder="请选择经销商类型"-->
<!--              />-->
<!--            </a-form-item>-->
<!--          </a-col>-->
<!--          <a-col :md="12" :sm="24">-->
<!--            <a-form-item-->
<!--              :labelCol="labelCol"-->
<!--              :wrapperCol="wrapperCol"-->
<!--              label="经销商级别"-->
<!--              hasFeedback-->
<!--            >-->
<!--              <cn-dict-select-tag-->
<!--                :options="{ value: 'dictDataCode', label: 'dictDataDesc' }"-->
<!--                :triggerChange="true"-->
<!--                dictCode="cust_level"-->
<!--                v-decorator="['custLevel', {}]"-->
<!--                placeholder="请选择经销商级别"-->
<!--              />-->
<!--            </a-form-item>-->
<!--          </a-col>-->
<!--          <a-col :md="12" :sm="24">-->
<!--            <a-form-item-->
<!--              :labelCol="labelCol"-->
<!--              :wrapperCol="wrapperCol"-->
<!--              label="渠道"-->
<!--              hasFeedback-->
<!--            >-->
<!--              <cn-dict-select-tag-->
<!--                :options="{ value: 'dictDataCode', label: 'dictDataDesc' }"-->
<!--                :triggerChange="true"-->
<!--                dictCode="cust_channel"-->
<!--                v-decorator="['channel', {}]"-->
<!--                placeholder="请选择渠道"-->
<!--              />-->
<!--            </a-form-item>-->
<!--          </a-col>-->
<!--          <a-col :md="12" :sm="24">-->
<!--            <a-form-item-->
<!--              :labelCol="labelCol"-->
<!--              :wrapperCol="wrapperCol"-->
<!--              label="所属组织"-->
<!--              hasFeedback-->
<!--            >-->
<!--              <j-tree-select-->
<!--                placeholder="请选择所属组织"-->
<!--                v-decorator="['orgCode', {}]"-->
<!--                data-type="org"-->
<!--              />-->
<!--            </a-form-item>-->
<!--          </a-col>-->
          <a-col :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="联系人"
              hasFeedback
            >
              <a-input
                placeholder="请输入联系人"
                v-decorator="['linkman', {}]"
              />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="联系电话"
              hasFeedback
            >
              <a-input
                placeholder="请输入联系电话"
                v-decorator="['telephone', validatorRules.telephone]"
              />
              <!--          <a-date-picker showTime format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'punchTime', {}]" />-->
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <!--                <a-form-item-->
            <!--                        :labelCol="labelCol"-->
            <!--                        :wrapperCol="wrapperCol"-->
            <!--                        label="省"-->
            <!--                        hasFeedback>-->
            <!--                    <a-input placeholder="请选择省" v-decorator="['province', {}]"/>-->
            <!--                </a-form-item>-->
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="省/市/区"
              hasFeedback
            >
              <cn-area-linkage
                @change="areaChange"
                v-model="areaLinkage"
                type="cascader"
                :province.sync="province"
                :city.sync="city"
                :area.sync="area"
              />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <!--                <a-form-item-->
            <!--                        :labelCol="labelCol"-->
            <!--                        :wrapperCol="wrapperCol"-->
            <!--                        label="区"-->
            <!--                        hasFeedback>-->
            <!--                    <a-input placeholder="请选择区" v-decorator="['area', {}]"/>-->
            <!--                </a-form-item>-->
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="地址"
              hasFeedback
            >
              <a-input placeholder="请输入地址" v-decorator="['address', {}]" />
            </a-form-item>
          </a-col>
<!--          <a-col :md="12" :sm="24">-->
<!--            <a-form-item-->
<!--              :labelCol="labelCol"-->
<!--              :wrapperCol="wrapperCol"-->
<!--              label="地址"-->
<!--              hasFeedback-->
<!--            >-->
<!--              <a-input-search placeholder="请选择公司" v-decorator="['custName',validatorRules.custName]"-->
<!--                              readOnly enter-button @search="custSearch('custName')" />-->
<!--              <a-input  readOnly type="hidden" v-decorator="['custCode']" />-->
<!--            </a-form-item>-->
<!--          </a-col>-->
<!--          <a-col :md="24" :sm="24">-->
<!--            <a-form-item-->
<!--              label="头像"-->
<!--              :labelCol="{-->
<!--                xs: { span: 24 },-->
<!--                sm: { span: 3 },-->
<!--              }"-->
<!--              :wrapperCol="{-->
<!--                xs: { span: 24 },-->
<!--                sm: { span: 20 },-->
<!--              }"-->
<!--            >-->
<!--              <upload-image-->
<!--                class="avatar-uploader"-->
<!--                text="上传头像"-->
<!--                v-decorator="['avatar', {}]"-->
<!--              />-->
<!--            </a-form-item>-->
<!--          </a-col>-->
          <a-col :md="24" :sm="24">
            <a-form-item
              :labelCol="{
                xs: { span: 24 },
                sm: { span: 3 },
              }"
              :wrapperCol="{
                xs: { span: 24 },
                sm: { span: 20 },
              }"
              label="备注"
              hasFeedback
            >
              <a-input
                type="textarea"
                placeholder="请输入备注"
                v-decorator="['remarks', {}]"
                style="min-height: 100px;"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>
import { httpAction } from "@/api/manage";
import { pick } from "lodash";
import moment from "moment";
import JTreeSelect from "@/components/cn-form/JTreeSelect";
import JAreaLinkage from "@comp/cn-form/CnAreaLinkage";
import { isMobile } from "@/utils/validate";
import { isNil } from "lodash";
import JImageUpload from "@/components/cn-form/JImageUpload";
import UploadImage from "@/components/upload-image/UploadImage";
import Area from "@/components/utils/Area";
export default {
  name: "companyModal",
  data() {
    return {
      areaLinkage: "",
      province: "",
      city: "",
      area: "",
      title: "操作",
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        telephone: {
          rules: [
            { required: true, message: "", trigger: "submit" },
            {
              validator: function (rule, value, callback) {
                if (!isMobile(value)) {
                  callback(new Error(""));
                }
                callback();
              },
            },
          ],
        },
      },
      addOrUpdateUrl: "/company/saveOrUpdateEntity",
    };
  },
  components: { JTreeSelect, JAreaLinkage, JImageUpload, UploadImage },
  created() {
    this.initAreaData();
  },
  methods: {
    add() {
      this.edit({});
    },
    edit(record) {
      this.form.resetFields();
      this.model = Object.assign({}, record);
      let pca =
        this.model.province + "/" + this.model.city + "/" + this.model.area;
      this.areaLinkage = this.areaData.getAreaCodeByText(pca) || "";
      this.visible = true;
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, Object.keys(this.model)));
        //时间格式化
        this.form.setFieldsValue({
          punchTime: this.model.punchTime
            ? moment(this.model.punchTime, "YYYY-MM-DD HH:mm:ss")
            : null,
        });
        this.form.setFieldsValue({
          birthday: this.model.birthday ? moment(this.model.birthday) : null,
        });
      });
    },
    close() {
      this.$emit("close");
      this.visible = false;
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let method = "";
          if (!this.model.id) {
            method = "post";
          } else {
            method = "post";
          }
          let formData = Object.assign(this.model, values);
          //时间格式化
          // formData.punchTime = formData.punchTime ? formData.punchTime.format('YYYY-MM-DD HH:mm:ss') : null;
          // formData.birthday = formData.birthday ? formData.birthday.format() : null;

          // console.log(formData)
          httpAction(this.addOrUpdateUrl, formData, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit("ok");
              } else {
                that.$message.warning(res.message);
              }
            })
            .finally(() => {
              that.confirmLoading = false;
            });
        }
      });
    },
    handleCancel() {
      this.close();
    },
    areaChange(code) {
      this.model.province = this.areaData.getText(code).split("/")[0];
      this.model.city = this.areaData.getText(code).split("/")[1];
      this.model.area = this.areaData.getText(code).split("/")[2];
    },
    initAreaData() {
      if (!this.areaData) {
        this.areaData = new Area();
      }
    },
  },
};
</script>

<style scoped></style>